'use client';

import { Difficulty } from '../types/game';

interface GameControlsProps {
  isPlaying: boolean;
  gameOver: boolean;
  difficulty: Difficulty;
  onStart: () => void;
  onPause: () => void;
  onRestart: () => void;
  onDifficultyChange: (difficulty: Difficulty) => void;
}

export default function GameControls({
  isPlaying,
  gameOver,
  difficulty,
  onStart,
  onPause,
  onRestart,
  onDifficultyChange,
}: GameControlsProps) {
  return (
    <div className="flex flex-col items-center gap-4 mt-4">
      {!isPlaying && !gameOver && (
        <div className="flex flex-col items-center gap-4">
          <div className="flex gap-2">
            {(['EASY', 'MEDIUM', 'HARD'] as Difficulty[]).map((diff) => (
              <button
                key={diff}
                onClick={() => onDifficultyChange(diff)}
                className={`px-4 py-2 rounded ${
                  difficulty === diff
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-200 text-gray-800'
                }`}
              >
                {diff.charAt(0) + diff.slice(1).toLowerCase()}
              </button>
            ))}
          </div>
          <button
            onClick={onStart}
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
          >
            开始游戏
          </button>
        </div>
      )}

      {isPlaying && !gameOver && (
        <button
          onClick={onPause}
          className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded"
        >
          暂停
        </button>
      )}

      {gameOver && (
        <button
          onClick={onRestart}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          重新开始
        </button>
      )}
    </div>
  );
} 